<template>
  <div class="ads-list">
    <el-card>
      <div slot="header">
        <el-button @click="$router.push({ name: 'add-ads' })"
          >添加广告</el-button
        >
      </div>
      <div>
        <el-table :data="adsData" style="width: 100%">
          <el-table-column prop="id" label="id" width="180"> </el-table-column>
          <el-table-column prop="name" label="广告名称" width="240">
          </el-table-column>
          <el-table-column prop="spaceId" label="广告位置" width="180">
          </el-table-column>
          <el-table-column prop="img" label="广告图片" width="180">
            <template slot-scope="scope">
              <img :src="scope.row.img" width="60" />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="时间" width="180">
          </el-table-column>
          <el-table-column prop="status" label="上线/下线" width="180">
            <template slot-scope="scope">
              {{ scope.row.status === 1 ? '上线' : '下线' }}
            </template>
          </el-table-column>
          <el-table-column prop="ad" label="操作">
            <template slot-scope="scope">
              <el-button @click="updateStatus(scope.row)" type="text">{{
                scope.row.status === 1 ? '下架' : '上架'
              }}</el-button>
              <el-button
                @click="
                  $router.push({
                    name: 'edit-ads',
                    params: { id: scope.row.id }
                  })
                "
                type="text"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAdList, updateStatus } from '@/service/ads'
export default {
  name: 'AdsList',
  data () {
    return {
      adsData: [
        {
          id: 1074,
          name: '嗄56打算对啊   打算',
          spaceId: 3,
          keyword: null,
          htmlContent: null,
          text: 'test',
          img:
            'https://edu-lagou.oss-cn-beijing.aliyuncs.com/images/2021/06/10/16232919049987548.png',
          link: 'http://edufront.lagou.com/#/content?courseId=1213',
          startTime: '2020-12-02T16:00:00',
          endTime: '2021-12-09T08:00:00',
          createTime: '2020-07-14T06:28:34.000+0000',
          updateTime: '2021-06-25T15:12:48.000+0000',
          status: 1,
          priority: 0,
          startTimeFormatString: '2020-12-02 16:00:00',
          endTimeFormatString: '2021-12-09 08:00:00'
        }
      ]
    }
  },
  created () {
    this.loadAdsLIst()
  },
  methods: {
    //   加载所有广告
    async loadAdsLIst () {
      const { data } = await getAdList()
      if (data.state === 1) {
        this.adsData = data.content
      }
    },
    async updateStatus (row) {
      const { data } = await updateStatus({
        id: row.id,
        status: row.status ^ 1
      })
      if (data.state === 1) {
        this.$message.success('操作成功')
        this.loadAdsLIst()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  text-align: left;
}
</style>
